<template>
  <div>
    <h1>学生外出申请</h1>
    <van-form @submit="onSubmit" >
    <van-field
        v-model="fd"
        name="fd"
        label="辅导员姓名"
        placeholder="辅导员姓名"
        :rules="[{ required: true, message: '请填写辅导员姓名' }]"
    />
    <van-field
        v-model="username"
        name="username"
        label="申请人姓名"
        placeholder="申请人姓名"
        :rules="[{ required: true, message: '请填写申请人姓名' }]"
    />
    <van-field
        v-model="xh"
        name="xh"
        label="申请人学号"
        placeholder="申请人学号"
        :rules="[{ required: true, message: '请填写申请人学号' }]"
    />
    <van-field
        v-model="phone"
        name="phone"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
    />
    <van-field
        v-model="xy"
        name="xy"
        label="学院名称"
        placeholder="学院名称"
        :rules="[{ required: true, message: '请填写学院名称' }]"
    />
    <van-field
        v-model="zy"
        name="zy"
        label="所在专业"
        placeholder="所在专业"
        :rules="[{ required: true, message: '请填写所在专业' }]"
    />
    <van-field
        v-model="nj"
        name="nj"
        label="年级"
        placeholder="格式: 2019级"
        :rules="[{ required: true, message: '请填写年级' }]"
    />
    <van-field
        v-model="bj"
        name="bj"
        label="所在班级"
        placeholder="所在班级"
        :rules="[{ required: true, message: '请填写所在班级' }]"
    />



    <van-field
        v-model="sy"
        name="sy"
        label="外出事由"
        placeholder="外出事由内容"
        :rules="[{ required: true, message: '请填写外出事由' }]"
    />

    <van-field
    readonly
    clickable
    name="sj"
    :value="sj"
    label="申请时间"
    placeholder="点击选择日期"
    @click="showCalendar = true"
    :rules="[{ required: true, message: '请填写申请时间' }]"
    />
    <van-calendar v-model="showCalendar" @confirm="onConfirm" />

    <van-field
    readonly
    clickable
    name="wcsj"
    :value="wcsj"
    label="外出时间"
    placeholder="点击选择日期"
    @click="showCalendar1 = true"
    :rules="[{ required: true, message: '请填写外出时间' }]"
    />
    <van-calendar v-model="showCalendar1" @confirm="onConfirm1" />

  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
    </van-form>
  </div>
</template>

<script type="text/ecmascript-6">
    export default {
    name:"Home",
    data() {
        return {
            fd:'',
            xh:'',
            username: '',
            sj: '',
            showCalendar: false,
            showCalendar1: false,
            phone:'',
            xy:'',
            zy:'',
            nj:'',
            bj:'',
            sy:'',
            wcsj:''

        };
    },
    methods: {

        onSubmit() {
          let obj = {
            fd:this.fd,
            xh:this.xh,
            username: this.username,
            sj: this.sj,
            phone:this.phone,
            xy:this.xy,
            zy:this.zy,
            nj:this.nj,
            bj:this.bj,
            sy:this.sy,
            wcsj:this.wcsj
        };
          // PubSub.publish('save', obj)
          // this.save(obj)			//发布消息
          window.localStorage.setItem("info",JSON.stringify(obj))
          this.$router.push('/page')
        },
        onConfirm(date) {
          let hours = new Date().getHours() > 10 ? new Date().getHours() : '0'+new Date().getHours()
          let minutes = new Date().getMinutes() > 10 ? new Date().getMinutes() : '0'+new Date().getMinutes()

          this.sj = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${hours}:${minutes}`;
          this.showCalendar = false;
        },

        onConfirm1(date) {
          this.wcsj = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
          this.showCalendar1 = false;
        },

    },
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

 
</style>
